<template>
  <div class="data-table">
    <!-- <div class="table-header"> -->
      <!-- <div class="table-title" v-if="title">
        <h3>{{ title }}</h3>
        <div class="table-desc" v-if="description">{{ description }}</div>
      </div> -->
      <!-- <div class="table-tools">
        <a-space>
          <a-tooltip title="刷新">
            <a-button type="text" @click="$emit('refresh')">
              <template #icon><ReloadOutlined /></template>
            </a-button>
          </a-tooltip>
          
          <a-tooltip title="密度">
            <a-dropdown>
              <template #overlay>
                <a-menu @click="handleSizeChange">
                  <a-menu-item key="large">默认</a-menu-item>
                  <a-menu-item key="middle">中等</a-menu-item>
                  <a-menu-item key="small">紧凑</a-menu-item>
                </a-menu>
              </template>
              <a-button type="text">
                <template #icon><ColumnHeightOutlined /></template>
              </a-button>
            </a-dropdown>
          </a-tooltip>
          
          <slot name="tableTools"></slot>

          <table-column-setting
            v-if="showColumnSetting"
            :columns="columns"
            @change="handleColumnChange"
          />
        </a-space>
      </div> -->
    <!-- </div> -->

    <a-table
      :columns="visibleColumns"
      :data-source="dataSource"
      :loading="loading"
      :pagination="pagination"
      :row-key="rowKey"
      :row-selection="rowSelection"
      :scroll="scroll"
      :size="tableSize"
      @change="handleTableChange"
      bordered
    >
      <template v-for="(_, name) in $slots" #[name]="slotData" :key="name">
        <slot :name="name" v-bind="slotData"></slot>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ReloadOutlined, ColumnHeightOutlined } from '@ant-design/icons-vue';
// import TableColumnSetting from './TableColumnSetting.vue';

/**
 * 数据表格组件
 */
const props = defineProps({
  /** 表格数据源 */
  dataSource: {
    type: Array,
    default: () => []
  },
  /** 表格列配置 */
  columns: {
    type: Array,
    default: () => []
  },
  /** 表格行主键 */
  rowKey: {
    type: [String, Function],
    default: 'id'
  },
  /** 表格加载状态 */
  loading: {
    type: Boolean,
    default: false
  },
  /** 表格分页配置 */
  pagination: {
    type: [Object, Boolean],
    default: false
  },
  /** 行选择配置 */
  rowSelection: {
    type: [Object, undefined],
    default: undefined
  },
  /** 表格滚动配置 */
  scroll: {
    type: Object,
    default: () => ({ x: 'max-content', y: 500 })
  },
  /** 表格标题 */
  title: {
    type: String,
    default: ''
  },
  /** 表格描述 */
  description: {
    type: String,
    default: ''
  },
  /** 是否显示列设置 */
  showColumnSetting: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['change', 'refresh', 'columnChange']);

// 表格大小
const tableSize = ref('large');

// 可见列配置
const visibleColumnKeys = ref(props.columns.map(col => col.key || col.dataIndex));

// 计算可见列
const visibleColumns = computed(() => {
  return props.columns.filter(col => {
    return visibleColumnKeys.value.includes(col.key || col.dataIndex);
  });
});

// 处理表格变化
const handleTableChange = (pagination, filters, sorter) => {
  emit('change',  pagination, filters, sorter );
};

// 处理表格大小变化
const handleSizeChange = ({ key }) => {
  tableSize.value = key;
};

// 处理列变化
const handleColumnChange = (keys) => {
  visibleColumnKeys.value = keys;
  emit('columnChange', keys);
};
</script>

<style scoped>
.data-table {
  background-color: #fff;
  border-radius: 2px;
  padding: 0;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.table-title {
  display: flex;
  flex-direction: column;
}

.table-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.table-desc {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  margin-top: 4px;
}

.table-tools {
  display: flex;
  align-items: center;
}

:global(.ant-table-body) {
  overflow-y: auto !important;
}
</style>
